<template>
	<div class="agent-btn">
		<span :class="activeIndex === index ? 'active' : ''" v-for="(btn, index) in btns" :key="index" @click="sortAgent(index)">{{ btn }}</span>
	</div>
</template>

<script>
export default {
	data() {
		return {
			btns: ['所有在线坐席', '示忙', '示闲', '振铃中', '会话中', '话后整理', '小休'],
			activeIndex: 0
		};
	},
	methods: {
		sortAgent(index) {
			this.activeIndex = index;
			this.$emit('sortAgent', index);
		}
	}
};
</script>

<style lang="less" scoped>
.agent-btn {
	padding: 10px;
	color: #666;
	span {
		margin-right: 10px;
		width: 118px;
		height: 30px;
		background: #fff;
		display: inline-block;
		line-height: 30px;
		text-align: center;
		border: 1px solid #d1d1d6;
		border-radius: 4px;
		cursor: pointer;
	}
	.active {
		border: 1px solid #6383fd;
		color: #6383fd;
	}
}
</style>
